<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Rangyinputs jQuery plugin demo</title>
    <link href="demo.css" rel="stylesheet" type="text/css">

        <g:javascript library="application" />
        <g:javascript library="jquery-1.7.min" />
        <g:javascript>
            jQuery.noConflict();
        </g:javascript>
        <g:javascript library="prototype" />

        <g:javascript library="jquery.autogrowtextarea" />

    <g:javascript library="rangyinputs" />

</head>
<body>
<h1>Rangy Text Inputs jQuery Demo</h1>

<br><br>

<p class="inputcontainer">
    <input type="button" class="unselectable" value="get selection range"
           onmousedown="var sel = jQuery('#ta').getSelection(); alert(sel.start + ',' + sel.end);">

    <input type="button" class="unselectable" value="paste test text"
           onmousedown="jQuery('#ta').replaceSelectedText('**Test**')">

    <input type="button" class="unselectable" value="extract selected text"
           onmousedown="alert(jQuery('#ta').extractSelectedText())">

    <input type="button" class="unselectable" value="surround selected text"
           onmousedown="jQuery('#ta').surroundSelectedText('[Before]', '[After]', true); jQuery('#ta').focus()">

    <input type="button" class="unselectable" value="replace selected text"
           onmousedown="jQuery('#ta').replaceSelectedText('[Replacement text]'); jQuery('#ta').focus()">

    <input type="button" class="unselectable" value="collapse to start"
           onmousedown="jQuery('#ta').collapseSelection(true); jQuery('#ta').focus()">

    <input type="button" class="unselectable" value="collapse to end"
           onmousedown="jQuery('#ta').collapseSelection(false); jQuery('#ta').focus()">

    <input type="button" class="unselectable" value="set selection"
           onmousedown="jQuery('#ta').setSelection(+jQuery('#ta_start')[0].value, +jQuery('#ta_end')[0].value); jQuery('#ta').focus()">

    Start: <input type="text" id="ta_start" size="3" value="5">

    End: <input type="text" id="ta_end" size="3" value="7">

    <br><br>
    <textarea rows="15" cols="80" id="ta">Some test text
That has

Some line breaks, including some trailing ones


</textarea>
</p>
</body>
</html>